<template>
  <div>
    <div class="song_sheet"
    :style="{backgroundColor:`rgba(${bgColor.ParameterOne},${bgColor.ParameterTwo},${bgColor.ParameterThree},.25)`}">
    <img class="bg_image" :src="songsList.coverImgUrl">
    <div class="text_sheet">
      <div class="introduce">{{songsList.name}}</div>
      <div class="user">
        <img :src="songsList.subscribers[index].avatarUrl" >
        <span>{{songsList.subscribers[index].nickname}}</span>
      </div>
    </div>
    </div>
    <div>
    <p class="title">歌曲列表</p>
    <Song v-for="item in songsheetList" :key="item.id"
    :name="item.name"
    :author="item.ar[0].name"
    :id="item.id"
    ></Song>
    </div>
  </div>
</template>

<script>
import { SongsheetAPI } from '@/api/index'
import { mapState } from 'vuex'
import Song from '@/components/SongComponents.vue'
export default {
  props: {
    name: String,
    author: String,
    id: Number
  },
  data () {
    return {
      songsList: [],
      songsheetList: [],
      index: 0
    }
  },
  components: {
    Song
  },
  async created () {
    const res = await SongsheetAPI({ id: this.$route.query.id })
    this.index = parseInt(this.$route.query.index)
    this.songsList = res.data.playlist
    this.songsheetList = res.data.playlist.tracks
  },
  computed: {
    ...mapState({
      bgColor: state => state.bgColor
    })
  }
}
</script>

<style scoped lang="less">
.title{
  padding: 0.266667rem 0.24rem;
  margin: 0 0 0.24rem 0;
  background-color: #eee;
  color: #9999;
  font-size: 15px;
}
.song_sheet{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0;
  width: 100%;
  height: 165px;
  margin-top: -7px;
}
.bg_image{
  width: 126px;
  height: 126px;
}
.text_sheet{
  width: 207px;
  height: 126px;
}
.introduce{
  font-size: 16px;
  font-weight: 400;
  color:rgb(74, 74, 74);
   word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2; /** 显示的行数 **/
  overflow: hidden; /** 隐藏超出的内容 **/
}
.user{
  display: flex;
  overflow: hidden;
  padding-top: 10px;
  img{
    width: 35px;
    height: 35px;
    border-radius:50% ;
  }
 span{
    font-size: 14px;
    line-height: 35px;
    color:rgb(94, 89, 89);
  }
}
</style>
